<template>
  <div class="addmainproducts">
    <div class="addmainproducts-box">
      <div class="mb16 clearfix" style="display: flex">
        <div class="cascader-box fl">
          <p
            v-for="item in optionList"
            :key="item.index"
            class="cascader-item"
            :class="{ activeCascader: item.id === currentIndex }"
            @click="selectCascaderItem_1(item)"
          >
            <span class="omit">{{ item.name }}</span>
            <i class="el-icon-arrow-right" />
          </p>
        </div>
        <div v-if="showLevel2" class="cascader-box fl">
          <p
            v-for="item in optionList2"
            :key="item.index"
            class="cascader-item"
            :class="{ activeCascader: item.id === currentIndex2 }"
            @click="selectCascaderItem_2(item)"
          >
            <span class="omit">{{ item.name }}</span>
            <!-- <i class="el-icon-arrow-right" /> -->
          </p>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getConfirmProducts">确 定</el-button>
    </div>
  </div>
</template>
  <script>
import api from "@/api";
export default {
  name: "AddMainproducts",
  props: ["sortType"],
  data() {
    return {
      loading: false,
      proOption: [],
      issueSearch: "",
      currentIndex: "",
      currentIndex2: "",
      currentIndex3: "",
      optionList: [],
      optionList2: [],
      optionList3: [],
      id1: "",
      id2: "",
      id3: "",
      name1: "",
      name2: "",
      name3: "",
      showLevel2: false,
      showLevel3: false,
    };
  },
  created() {
    this.getListProductSort();
  },
  methods: {
    // 选择三级联动
    selectCascaderItem_1(item) {
      this.currentIndex = item.id;
      this.id1 = item.id;
      this.name1 = item.name;
      this.name2 = "";
      this.id2 = "";
      this.getListProductSort2(item.id);
    },
    selectCascaderItem_2(item) {
      this.currentIndex2 = item.id;
      this.id2 = item.id;
      this.name2 = item.name;
    },
    changeVlue(val) {
      const codeList = val.split(",");
      this.id1 = codeList[0] ? codeList[0] : "";
      this.id2 = codeList[1] ? codeList[1] : "";
      this.id3 = codeList[2] ? codeList[2] : "";
      if (codeList.length === 1) {
        this.optionList.forEach((item) => {
          if (item.sortCode === this.id1) {
            this.currentIndex = item.sortCode;
            this.name1 = item.sortName;
            this.name2 = "";
            this.name3 = "";
            this.showLevel2 = false;
            this.showLevel3 = false;
          }
        });
      }
      if (codeList.length === 2) {
        this.getListProductSort2(this.id1, 2);
      }
      if (codeList.length === 3) {
        this.getListProductSort2(this.id1, 3);
      }
      this.issueSearch = "";
    },
    async getListProductSort2(id, echo) {
      const obj = {
        parentId: id,
      };
      const listData = await api.common.getIndustryClassifySelectByLevel(obj);
      this.showLevel2 = true;
      this.optionList2 = listData.data.data;
      if (echo === 2) {
        this.echo2();
      } else if (echo === 3) {
        this.getListProductSort3(this.id2, 3);
      }
    },
    echo2() {
      this.optionList.forEach((item) => {
        if (item.sortCode === this.id1) {
          this.currentIndex = item.sortCode;
          this.name1 = item.sortName;
          this.name2 = "";
          this.name3 = "";
          this.showLevel2 = true;
          this.showLevel3 = false;
        }
      });
      this.optionList2.forEach((item) => {
        if (item.sortCode === this.id2) {
          this.currentIndex2 = item.sortCode;
          this.name2 = item.sortName;
          this.name3 = "";
          this.showLevel2 = true;
          this.showLevel3 = false;
        }
      });
    },
    echo3() {
      this.optionList.forEach((item) => {
        if (item.sortCode === this.id1) {
          this.currentIndex = item.sortCode;
          this.name1 = item.sortName;
          this.name2 = "";
          this.name3 = "";
          this.showLevel2 = true;
          this.showLevel3 = false;
        }
      });
      this.optionList2.forEach((item) => {
        if (item.sortCode === this.id2) {
          this.currentIndex2 = item.sortCode;
          this.name2 = item.sortName;
          this.name3 = "";
          this.showLevel2 = true;
          this.showLevel3 = false;
        }
      });
      this.optionList3.forEach((item) => {
        if (item.sortCode === this.id3) {
          this.currentIndex3 = item.sortCode;
          this.name3 = item.sortName;
          this.showLevel2 = true;
          this.showLevel3 = true;
        }
      });
    },
    async getListProductSort() {
      const obj = {
        parentId: 0,
      };
      const listData = await api.common.getIndustryClassifySelectByLevel(obj);
      this.optionList = listData.data.data;
    },
    getConfirmProducts() {
      if (!this.id2) {
        this.$message.error("请选择完整的类目信息");
        return false;
      }
      const params = [
        {
          immsortid: this.id1,
          imsorttype: this.id2,
          imtype: this.id3,
          onesortname: this.name1,
          twosortname: this.name2,
          threesortname: this.name3,
          onesortid: this.id1,
          twosortid: this.id2,
          threesortid: this.id3,
          mptype: this.sortType == 0 ? 1 : this.sortType == 3 ? 4 : 3,
        },
      ];

      this.$emit("confirmProductsList", params);
    },
  },
};
</script>
  <style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body {
  padding: 0 20px 30px;
}

.addmainproducts {
  .addmainproducts-box {
    height: 430px;
    padding: 16px;
    box-sizing: border-box;
    margin: 16px auto;
    background: #f5f8fc;

    .history_mainBox_search {
      ::v-deep .el-input {
        width: 565px;
        margin-right: 8px;
      }
    }
    .cascader-box .activeCascader {
      color: #0c7ff2;
    }
    .cascader-box span {
      display: inline-block;
      width: 130px;
    }
    .cascader-box {
      background: #fff;
      margin-right: 14px;
      width: 178px;
      padding: 6px 0;
      height: 352px;
      overflow-y: auto;
    }
    .cascader-box:nth-child(3) {
      margin-right: 0;
    }
    .cascader-item {
      height: 34px;
      display: -webkit-flex;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px 0 20px;
      font-size: 14px;
      color: #4f5862;
      cursor: pointer;

      .omit {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .dialog-footer {
    padding-top: 16px;
    text-align: right;
  }
}
</style>
  